import React, { Component } from 'react';
import 'antd/dist/antd.css'
import store from './store/index'
import { Input, Button, List } from 'antd'
const data = [
    'Racing car sprays burning fuel into crowd.',
    'Japanese princess to wed commoner.',
    'Australian walks 100km after outback crash.',
    'Man charged over missing wedding girl.',
    'Los Angeles battles huge wildfires.',
]
class TodoList extends Component {
    constructor(props){
        super(props)
        // 统一解决this指向 
        // 这个是数据改变后的处理函数 全局数据
        this.storeChange = this.storeChange.bind(this)
        this.changeInputValue= this. changeInputValue.bind(this)
        // react全局数据商店里面包含一个方法 叫做getState 可以知道里面全部数据
        // console.log(this.$store.state )
        console.log(store.getState())
         this.state = {
             name:'cluo'
         }
        //   这个reduxapi 给了一个 如果store数据有变化 就通知 某个函数
         store.subscribe(this.storeChange) //订阅Redux的状态
    }
    // 通知数据改变后的处理函数
    storeChange(){
        console.log('全局数据改变了')
        this.setState(store.getState())
    }

    changeInputValue(e){
        console.log('input',e)
        const action = {type:'changeinput',value:e.target.value}
        // react的派发器像全局数据中心派发改变的数据
        store.dispatch(action)
        console.log('看全局数据',store.getState())
    }
    // 这是点击全局数据的方法
    clickbtn=()=>{
        const action = {type:'additem'}
        store.dispatch(action)
    }
    // 删除选项的全局方法 
    deleteitem(index) {
        const action = {
            type :'deleteitem',
            index:index
        }

        store.dispatch(action)
    }


    componentDidMount(){
        var a1 = store.getState()
        // 第一遍组件渲染的时候 赋值全局数据了   之后就没有 
        this.setState(a1)
        // vuex 是全局变了  组件就变 react全局变了 组件要想办法拿到
        // setInterval(()=>{
        //     this.setState(store.getState())
        // },1000)
    }
     
    render() {
        return (
            <div style={{ margin: '10px' }}>
                <div>
                    <Input
                        value={this.state.inputValue}
                        onChange={this.changeInputValue}
                        placeholder='writesometing'
                        style={{ width: '250px', marginRight: '10px' }}
                    ></Input>
                    <Button onClick={this.clickbtn} type='primary'>点击增加</Button>
                </div>

                <div style={{ width: '350px', marginRight: '10px' }}>
                    <List
                        bordered
                        dataSource={this.state.list}
                        renderItem={(item,index) => (<List.Item onClick={this.deleteitem.bind(this,index)}>{item}</List.Item>)}
                    >

                    </List>
                </div>
            </div>
        );
    }
}
export default TodoList;